<template>
  <div class="ad-content">
    <Tabs v-model="tabVal" type="card">
      <TabPane label="上架列表" name="1">
        <div class="up_list flex">
          <orgTree @onSearch="searchFun"></orgTree>
          <div class="r_box flex-1" style="width: calc(100% - 250px)">
            <div class="r_top flex">
              <customTopList
                :fromType="'advertisement'"
                :topRocerdData="topRocerdData"
                @getClickData="getClickData" />
              <Button type="primary" @click="showBtn">预览广告位</Button>
            </div>
            <dt-grid ref="table" :columns="columns" :onFetch="onFetch" :page="tabVal == 1 ? false : true" />
          </div>
        </div>
      </TabPane>
      <TabPane label="下架列表" name="2">
        <div class="down_list">
          <div class="flex flex-horizontal-end">
            <Button type="primary" @click="portManage">端口管理</Button>
            <Button type="primary" style="margin: 0 10px" @click="showBtn">预览广告位</Button>
            <Button type="primary" @click="createAd">新增广告</Button>
          </div>
          <dt-grid ref="table1" :columns="columns" :onFetch="onFetch" :page="tabVal == 1 ? false : true" />
        </div>
      </TabPane>
    </Tabs>

    <!--预览-->
    <preview ref="preview"></preview>

    <!--广告位预览-->
    <advertisementPre ref="advertisementPre"></advertisementPre>

    <!--端口管理-->
    <portManage ref="portManage"></portManage>

    <Modal v-model="upConfirm" title="广告上架冲突" footer-hide>
      <p>该广告所发布的组织或端口已无剩余广告位，请先下架对应广告后再进行上架操作</p>
      <div class="btn_box">
        <Button @click="closeBtn" style="margin-right: 20px">关闭</Button>
        <Button @click="upBtn" type="primary">查看明细</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import columnOpt from './opt/column.js'
  import adMgr from '@/biz/backStage/advertisement'
  import preview from './components/preview.vue'
  import orgTree from './components/orgTree.vue'
  import customTopList from '@/components/customTopList.vue'
  import advertisementPre from './components/advertisementPre.vue'
  import portManage from './components/portManage.vue'
  export default {
    data() {
      return {
        tabVal: '1',
        columns: [],
        topRocerdData: {},
        showBlock: false,
        showUp: false,
        orgId: null,
        port: 'COUNSELOR',
        upConfirm: false,
        curId: null
      }
    },
    components: {
      preview,
      orgTree,
      customTopList,
      advertisementPre,
      portManage
    },
    mounted() {
      this.tabVal = this.$route.query.tabVal || '1'
      this.columns = columnOpt.options(this)
      this.$refs.table.init(this)
    },
    watch: {
      tabVal(val) {
        this.columns = columnOpt.options(this)
        if (val == 1) {
          this.$refs.table.fetch()
          this.getPortAd()
        } else {
          this.$refs.table1.fetch()
        }
      }
    },
    methods: {
      onFetch(data) {
        if (this.tabVal == 1) {
          data.orgId = this.orgId
          data.port = this.port
          return adMgr.getAdvListByOnShelf(data).then((res) => {
            console.log('表格数据', res)
            return res
          })
        } else {
          return adMgr.getAdvListByOffShelf(data).then((res) => {
            return res
          })
        }
      },
      getPortAd() {
        if (!this.orgId) return
        let params = {
          orgId: this.orgId
        }
        adMgr.getOnShelfStatistics(params).then((res) => {
          console.log('广告数', res)
          this.topRocerdData = res
        })
      },
      searchFun(val) {
        this.orgId = val
        this.$refs.table.fetch()
        this.getPortAd()
      },
      getClickData(val) {
        this.port = val.queryType
        this.$refs.table.fetch()
      },
      showBtn() {
        this.$refs.advertisementPre.show()
      },
      portManage() {
        this.$refs.portManage.show()
      },
      // 置顶
      topping(param) {
        if (param.multiOrgFlag) return
        this.topFun(param)
      },
      // 置顶当前
      toppingCur(param) {
        this.topFun(param, true)
      },
      // 置顶全部
      toppingAll(param) {
        this.topFun(param)
      },
      // 下架
      offShelf(param) {
        if (param.multiOrgFlag) return
        this.offShelfFun(param)
      },
      // 下架当前
      offShelfCur(param) {
        this.offShelfFun(param, true)
      },
      // 下架全部
      offShelfAll(param) {
        this.offShelfFun(param)
      },
      /* // 上移
      moveUp(val) {
        if (val.rowIndex == 0) {
          this.$Message.warning('已经是第一条，不可上移!')
          return false
        }

        let params = {
          id: val.row.id,
          adjustOrder: 0,
          displayOrder: val.row.displayOrder
        }
        adMgr.updateAdvDisplayOrder(params).then((res) => {
          this.$Message.success('上移成功！')
          this.$refs.table.fetch()
        })
      },
      // 下移
      moveDown(val) {
        if (val.rowIndex == this.upList.length - 1) {
          this.$Message.warning('已经是最后一条，不可下移!')
          return false
        }
        let params = {
          id: val.row.id,
          adjustOrder: 1,
          displayOrder: val.row.displayOrder
        }
        adMgr.updateAdvDisplayOrder(params).then((res) => {
          this.$Message.success('下移成功！')
          this.$refs.table.fetch()
        })
      }, */

      // 下架方法
      offShelfFun(row, flag = false) {
        this.$Modal.confirm({
          title: '广告下架确认',
          content: '请确认，是否对当前广告进行下架？',
          onOk: () => {
            let params = {
              advertisementId: row.advertisementId
            }
            flag && (params.orgId = this.orgId)
            adMgr.updateOffShelf(params).then((res) => {
              this.$Message.success('下架成功。')
              this.$refs.table.fetch()
              this.getPortAd()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了下架。')
          }
        })
      },
      // 置顶方法
      topFun(row, flag = false) {
        let params = {
          advertisementId: row.advertisementId
        }
        flag && (params.orgId = this.orgId)
        adMgr.updateDisplayTop(params).then((res) => {
          this.$Message.success('置顶成功。')
          this.$refs.table.fetch()
        })
      },

      // 预览
      previewFun(row) {
        console.log('预览', row)
        row.origin = 'set'
        this.$refs.preview.show(row)
      },
      closeBtn() {
        this.upConfirm = false
      },
      upBtn() {
        this.$refs.advertisementPre.show(this.curId)
        this.upConfirm = false
      },
      // 上架
      upShelf(row) {
        this.$Modal.confirm({
          title: '广告上架确认',
          content: '请确认，是否对当前广告进行上架？上架后，该广告将在前端展示。您可在“上架列表”中查看该广告',
          onOk: () => {
            this.curId = row.id
            let params = {
              id: row.id
            }
            adMgr
              .updateAdvOnShelf(params)
              .then((res) => {
                this.$Message.success('上架成功。')
                // this.$refs.table.fetch()
                this.$refs.table1.fetch()
              })
              .catch((err) => {
                console.log(err)
                this.upConfirm = true
              })
          },
          onCancel: () => {
            this.$Message.info('你取消了上架。')
          }
        })
      },
      // 新增广告
      createAd() {
        this.$router.push({
          name: 'createAd',
          query: {
            tabVal: this.tabVal
          }
        })
      },
      // 删除
      deleteFun(row) {
        this.$Modal.confirm({
          title: '广告删除确认',
          content: '请确认，是否将当前广告从系统中删除，删除后将不可恢复',
          onOk: () => {
            let params = {
              id: row.id
            }
            adMgr.deleteFun(params).then((res) => {
              this.$Message.success('删除成功')
              this.$refs.table1.fetch()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了删除。')
          }
        })
      },
      //编辑
      editFun(row) {
        this.$router.push({
          name: 'createAd',
          query: {
            advId: row.id,
            tabVal: this.tabVal
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ad-content {
    padding: 20px;
  }
  .upShelf {
    position: relative;
    z-index: 999;
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .btn_box {
    margin-top: 24px;
    text-align: right;
  }
</style>
